<template>
  <div class="code-two" v-if="colorBarShow">
    <div class="color-content">
      <img src="../common/images/close.png" class="close" @click="cancel">
      <img src="../common/images/color_bar.png" class="color-bar">
      <p class="hint">请前往1F专属会员通道领取福袋</p>
      <img src="../common/images/code.png" class="color-code">
      <p class="code-english">HY-01</p>
      <p class="code-math">012345678999</p>
    </div>
  </div>
</template>

<script>

  export default {
    components: {
    },
    props: {
      'colorBarShow': {
        default: false
      }
    },
    data () {
      return {
      }
    },
    methods: {
      // 取消
      cancel() {
        this.$emit('codeClose')
      }
    }
  }
</script>

<style lang="stylus">
  @import '../common/stylus/base.styl'
  .code-two
    width 100%
    position fixed
    top 0
    bottom 0
    right 0
    left 0
    background-color rgba(0,0,0,.8)
    z-index 100
    .color-content
      text-align center
    .close
      width vw(40)
      height vw(40)
      position absolute
      top vw(30)
      right vw(30)
      z-index 200
    .color-bar
      width 100%
      height auto
      display block
    .hint
      width 100%
      color #f6e7d9
      font-size vw(30)
    .color-code
      width vw(214)
      height vw(214)
      margin-top vw(70)
      margin-bottom vw(20)
    .code-english, .code-math
      color #ffffff
      font-size vw(24)
    .code-math
      margin-top vw(60)
</style>
